import React, { useState, useEffect } from "react";
import {
  LockOutlined,
  UserOutlined,
  LogoutOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import { Layout, Menu, theme, Dropdown, Tooltip, Avatar, Button } from "antd";
import { Outlet, useLocation, history, useModel } from "umi";
import { doFetch } from "@/utils/doFetch";
import Fade from "react-reveal/Fade";
const { Header, Content, Footer, Sider } = Layout;

function Headers({ currentUser, children, broken }) {
  const {
    token: { colorBgContainer, colorBorder },
  } = theme.useToken();
  const location = useLocation();
  const {
    initialState: { fetchUserInfo },
    setInitialState,
  } = useModel("@@initialState");

  const items = [
    {
      key: "1",
      label: (
        <span target="_blank" rel="noopener noreferrer">
          个人中心
        </span>
      ),
      icon: <UserOutlined />,
    },
    // {
    //   key: "2",
    //   label: (
    //     <span target="_blank" rel="noopener noreferrer">
    //       修改密码
    //     </span>
    //   ),
    //   icon: <LockOutlined />,
    // },
    {
      key: "4",
      danger: true,
      label: "退出登录",
      icon: <LogoutOutlined />,
    },
  ];

  return (
    <Header
      style={{
        padding: 0,
        background: "transparent",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        color:"#ffffff"
      }}
    >
      <div style={{ marginLeft: 24 }} className="centerl">
        {broken && children}
      </div>
      <Dropdown
        menu={{
          items,
          onClick: (e) => {
            if (e.key === "1") {
              history.push("/mycenter");
            }

            if (e.key === "4") {
              //判断退出逻辑
              localStorage.removeItem("TOKENSTRING");
              setInitialState((s) => ({
                ...s,
                currentUser: null,
              }));
              history.push("/user/login");
            }
          },
        }}
        placement="bottom"
      >
        <div style={{ marginRight: 112, gap: 12 }} className="centerl">
          <Avatar
            size={"large"}
            src={currentUser?.head_image ?? "./user_s.png"}
            style={{ backgroundColor: colorBorder }}
          ></Avatar>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              height: 40,
              lineHeight: 1.5,
            }}
          >
            <b>{currentUser?.name ?? "-"}</b>
            <span>{currentUser?.real_name ?? "-"}</span>
          </div>
        </div>
      </Dropdown>
    </Header>
  );
}

export default Headers;
